<template>
  <div style="padding:20px;width:100%">
    <div class="clearfix">
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">订单时间</div>
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">商品名称</div>
        <el-input class="c-box-flex" placeholder="请输入商品名称" v-model="goodsName" clearable></el-input>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">用户账号</div>
        <el-input class="c-box-flex" placeholder="请输入用户账号" v-model="userAccount" clearable></el-input>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">支付方式</div>
        <el-select v-model="discountWay" placeholder="请选择" class="c-box-flex" clearable>
          <el-option label="微信" value="0"></el-option>
          <el-option label="支付宝" value="1"></el-option>
        </el-select>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">渠道</div>
        <el-select v-model="channelId" placeholder="请选择" class="c-box-flex" clearable>
          <el-option :label="obj.name" :value="obj.id" v-for="obj in channelList" :key="obj.id"></el-option>
        </el-select>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">商品类别</div>
        <el-select v-model="menuOne" placeholder="请选择" class="c-box-flex" clearable>
          <el-option :label="obj.name" :value="obj.id" v-for="obj in typeList" :key="obj.id"></el-option>
        </el-select>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">订单状态</div>
        <el-select v-model="orderState" placeholder="请选择" class="c-box-flex" clearable>
          <el-option :label="obj.name" :value="obj.id" v-for="obj in orderStateList" :key="obj.id"></el-option>
        </el-select>
      </div>
    </div>
    <div class="c-flex">
      <div class="c-box-flex">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
      <div></div>
    </div>
    <div ref="table" class="mt15">
      <el-table :data="List" style="width: 100%" :max-height="maxHeight" border>
        <el-table-column prop="orderNumber" label="订单编号"></el-table-column>
        <el-table-column prop="createTime" label="订单时间">
          <template slot-scope="scope">{{$format(scope.row.createTime)}}</template>
        </el-table-column>
        <el-table-column prop="gtype" label="商品类别"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column prop="goodsNum" label="数量"></el-table-column>
        <el-table-column prop="goodsPrice" label="成本价（元）"></el-table-column>
        <el-table-column prop="orderPrice" label="订单金额(元)"></el-table-column>
        <el-table-column prop="memberType" label="会员类型"></el-table-column>
        <el-table-column prop="discountWay" label="优惠方式">
          <template slot-scope="scope">
            <div>{{discountWayList[scope.row.discountWay]}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="discountPrice" label="优惠金额(元)">
          <template slot-scope="scope">
            <div>{{scope.row.discountPrice?scope.row.discountPrice:0}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="actualPrice" label="实付金额(元) 包含运费10元"></el-table-column>
        <el-table-column prop="paymentWay" label="付款方式">
          <template slot-scope="scope">{{scope.row.paymentWay?'支付宝':'微信'}}</template>
        </el-table-column>
        <el-table-column prop="cName" label="渠道"></el-table-column>
        <el-table-column prop="userAccount" label="用户账号"></el-table-column>
        <el-table-column prop="shrName" label="收货人"></el-table-column>
        <el-table-column prop="address" label="收货地址">
          <template slot-scope="scope">{{scope.row.cityNmae}}{{scope.row.address}}</template>
        </el-table-column>
        <el-table-column prop="kdName" label="快递公司"></el-table-column>
        <el-table-column prop="kdNo" label="快递单号"></el-table-column>
        <el-table-column prop="returnTime" label="订单状态">
          <template slot-scope="scope">
            <div v-for="obj in orderStateList" :key="obj.id">
              <span v-if="scope.row.orderState==obj.id">{{obj.name}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderState" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              v-if="scope.row.orderState=='SUCCESS'"
              @click="returnFn(scope.row.id)"
            >退款</el-button>
            <div
              style="width:100%"
              class="c-flex c-aj-c"
              v-if="scope.row.orderState!='SUCCESS'&& scope.row.orderState!='DAIFAHUO'"
            >-</div>
            <el-button
              type="primary"
              size="mini"
              v-if="scope.row.orderState=='DAIFAHUO'"
              @click="fahuo(scope.row.id)"
            >发货</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="mt20 c-flex">
        <div class="c-box-flex vh"></div>
        <el-pagination
          @size-change="setPageSize"
          @current-change="setPage"
          :current-page="currentPage"
          :page-sizes="[20, 200, 300, 400]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        ></el-pagination>
      </div>
    </div>

    <el-dialog title="发货" :visible.sync="dialogVisible" width="30%">
      <div class="c-flex c-a-c mb15">
        <div class="mr10">快递公司</div>
        <el-select v-model="sendName" placeholder="请选择" style="width:300px" clearable>
          <el-option :label="obj.name" :value="obj.name" v-for="obj in sendList" :key="obj.id"></el-option>
        </el-select>
      </div>
      <div class="c-flex c-a-c mb15">
        <div class="mr10">快递单号</div>
        <el-input style="width:300px" placeholder="请输入用户账号" v-model="sendNo" clearable></el-input>
      </div>
      <div class="c-flex c-aj-c">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="deliver">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      time: [],
      orderStateList: [
        { name: "待付款", id: "UNPAID" },
        { name: "待发货", id: "DAIFAHUO" },
        { name: "已完成", id: "SUCCESS" },
        { name: "已退款", id: "RETURN" }
      ],

      //列表相关
      List: [],
      pageTotal: null,
      currentPage: 1,
      pageSize: 20,
      maxHeight: null,
      orderNumber: null,
      orderState: null,
      memberType: null,
      discountWay: null,
      userAccount: null,
      userPhone: null,
      goodsName: null,
      channelId: null,
      channelList: [],
      menuOne: null,

      dialogVisible: false,
      sendList: [],
      sendNo: null,
      sendName: null,

      orderId: null,
      typeList: [],
      sourceList: [],
      discountWayList: ["无", "折扣", "满减", "优惠券"]
    };
  },
  mounted() {
    this.maxHeight = window.innerHeight - this.$refs.table.offsetTop - 80;
    this.getList(this.currentPage, this.pageSize);
    this.getsupplierId(42, "channelList"); //渠道
    this.getsupplierId(79, "sendList"); //快递
    this.getsupplierId(44, "typeList"); //类别
    this.getsupplierId(70, "sourceList"); //来源
  },

  methods: {
    getList(currentPage, pageSize) {
      this.$axios
        .get("/spOrderRecord/mearchOrderList", {
          params: {
            pageNum: currentPage,
            pageSize: pageSize,
            orderState: this.orderState,
            userAccount: this.userAccount,
            userPhone: this.userPhone,
            goodsName: this.goodsName,
            channelId: this.channelId,
            menuOne: this.menuOne,
            paymentWay: this.paymentWay,
            startTime:
              JSON.stringify(this.time) != "[]" && this.time
                ? this.$format(this.time[0])
                : "",
            endTime:
              JSON.stringify(this.time) != "[]" && this.time
                ? this.$format(this.time[1])
                : ""
          }
        })
        .then(res => {
          console.log(res.data.data.list);

          if ((res.data.code = 200)) {
            this.List = res.data.data.list;
            this.pageTotal = res.data.data.total;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //分页
    setPage(currentPage) {
      this.currentPage = v;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    },
    //分页大小
    setPageSize(v) {
      this.currentPage = 1;
      this.pageSize = v;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    },
    //搜索
    search() {
      this.currentPage = 1;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    },

    getsupplierId(id, name) {
      //供应商
      this.$axios
        .get("/shop/classify/classifyMenuList", {
          params: {
            id: id
          }
        })
        .then(res => {
          if ((res.data.code = 200)) {
            this[name] = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    returnFn(id) {
      this.$confirm("是否确认退款?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .get("/spOrderRecord/return/" + id)
            .then(res => {
              if ((res.data.code = 200)) {
                this.currentPage = 1;
                this.$nextTick(() => {
                  this.getList(this.currentPage, this.pageSize);
                });
                this.$message({
                  type: "success",
                  message: "退款成功!"
                });
              }
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退款"
          });
        });
    },
    fahuo(id) {
      this.dialogVisible = true;
      this.orderId = id;
      this.sendName = null;
      this.sendNo = null;
    },
    deliver() {
      if (!this.sendName) {
        this.$message.error("请选择快递公司");
        return false;
      }
      if (!this.sendNo) {
        this.$message.error("请填写快递单号");
        return false;
      }

      this.$axios
        .get("/spOrderRecord/send", {
          params: {
            orderId: this.orderId,
            sendName: this.sendName,
            sendNo: this.sendNo
          }
        })
        .then(res => {
          if ((res.data.code = 200)) {
            this.dialogVisible = false;
            this.currentPage = 1;
            this.$nextTick(() => {
              this.getList(this.currentPage, this.pageSize);
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    reset() {
      this.orderState = null;
      this.userAccount = null;
      this.userPhone = null;
      this.goodsName = null;
      this.paymentWay = null;
      this.menuOne = null;
      this.time = [];
      this.channelId = null;
      this.currentPage = 1;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    }
  }
};
</script>
<style lang="less" scoped>
.clearfix {
  .el-date-editor--daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 280px;
  }
}
</style>
